<template>
  <div class="common-layout">
    <el-container height="100vh">
      <el-aside width="auto">
        <Aside :routes="routes" :isCollapse="isCollapse"></Aside>
      </el-aside>
      <el-container>
        <el-header height="auto">
          <Header @isCollapseState="isCollapseState"></Header>
        </el-header>
        <el-main style="height: 85vh; padding: 0 1em">
          <Main>
            <template #body>
              <router-view></router-view>
            </template>
          </Main>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import router from "@/router";
import Aside from "@/components/layout/aside/index.vue";
import Header from "@/components/layout/header/index.vue";
import Main from "@/components/layout/main/index.vue";

const isCollapse = ref(true);
const routes = ref();

function isCollapseState(value: boolean) {
  isCollapse.value = value;
}

function filterValidRoutes() {
  // 递归过滤函数
  function filterRoutes(routes: any) {
    return routes.filter((route: any) => {
      const segments = route.path.split("/").filter(Boolean);

      // 基础条件检查：必须显示且路径段数为1
      if (route.meta?.isShowNav !== true || segments.length !== 1) {
        return false;
      }

      // 如果有子路由，递归过滤
      if (route.children?.length > 0) {
        route.children = filterRoutes(route.children);

        // 如果过滤后子路由为空，且没有自己的组件，则过滤掉该父路由
        if (route.children.length === 0 && !route.component) {
          return false;
        }
      }

      return true;
    });
  }

  // 应用过滤
  routes.value = filterRoutes(router.getRoutes());
}

onMounted(() => {
  filterValidRoutes();
});
</script>

<style scoped>
.el-header {
  padding: 0 1em;
}
</style>
